<!--订单列表-->

<template>
    <div>

        <el-row :gutter="20" class="toolbar">
            <el-col :span="4">
                <el-input v-model="queryForm.openId" placeholder="请输入OpenId" clearable></el-input>
            </el-col>
            <el-col :span="4">
                <el-input v-model="queryForm.transactionId" placeholder="请输入交易单号" clearable></el-input>
            </el-col>
            <el-col :span="4">
                <el-input v-model="queryForm.paymentId" placeholder="请输入支付单号" clearable></el-input>
            </el-col>

            <el-col :span="4">
                <el-select v-model="queryForm.orderStatus" placeholder="请选择状态" clearable>
                    <el-option label="充值成功" value="充值成功"></el-option>
                    <el-option label="充值失败" value="充值失败"></el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </el-col>
        </el-row>


        <div style="margin-top: 20px;">
            <el-button type="warning" @click="exportData">导出</el-button>
        </div>

        <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%; margin-top: 20px;">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="openId" label="OpenId" width="180"></el-table-column>
            <el-table-column prop="businessId" label="业务单号" width="180"></el-table-column>
            <el-table-column prop="transactionId" label="交易单号" width="180"></el-table-column>
            <el-table-column prop="paymentId" label="支付单号" width="180"></el-table-column>
            <el-table-column prop="platform" label="平台" width="100"></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" width="120"></el-table-column>
            <el-table-column prop="orderAmount" label="订单金额(元)" width="120"></el-table-column>
            <el-table-column prop="orderType" label="订单类型" width="120"></el-table-column>
            <el-table-column prop="bookCoin" label="书币" width="100"></el-table-column>
            <el-table-column prop="giftBookCoin" label="赠送书币" width="100"></el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <div>
                        <el-link type="primary" @click="handleRefund(scope.row)">订单退款</el-link><br/>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

    </div>
</template>

<script setup>
    import { reactive, ref } from 'vue'
    import {ElMessage, ElMessageBox} from 'element-plus'

    const queryForm = reactive({
        openId: '',
        businessId: '',
        transactionId: '',
        paymentId: '',
        orderStatus: ''
    })

    const tableData = [
        { createTime: '2024-06-19 14:06:18', openId: '000-avV0wQ0rQBIrDED64aHfuDziupvKs', businessId: 'T18033083032261886976', transactionId: 'motb738209176448563849069912', paymentId: 'TP2024061914061028862783677641', platform: 1, orderStatus: '充值成功', orderAmount: '9.9', orderType: '普通订单', bookCoin: 0, giftBookCoin: 0 },
        { createTime: '2024-06-19 13:28:20', openId: '000Lc4vEfq4VKykYaYHSQwXP5IdlDIMA1TR', businessId: 'T1803298750669856768', transactionId: 'motb73820819769765747837671', paymentId: '20240619220014 9451456972479', platform: 1, orderStatus: '充值成功', orderAmount: '19.9', orderType: '普通订单', bookCoin: 0, giftBookCoin: 0 },
        { createTime: '2024-06-19 13:26:34', openId: '000t0T8Yh7qgLfOHMtUwpMs9etsC-6Aj56O', businessId: 'T1803298302223261696', transactionId: 'motb73820815177884818558772', paymentId: '20240619220014 56491432546617', platform: 1, orderStatus: '充值成功', orderAmount: '19.9', orderType: '普通订单', bookCoin: 0, giftBookCoin: 0 }
    ]

    const currentPage = ref(1)
    const pageSize = ref(10)

    const search = () => {
        ElMessage.success('查询成功')
    }

    const reset = () => {
        queryForm.openId = ''
        queryForm.businessId = ''
        queryForm.transactionId = ''
        queryForm.paymentId = ''
        queryForm.orderStatus = ''
    }

    const handleRefund = (row) => {
        ElMessageBox.confirm('此操作将进行退款, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            // Implement delete logic here
            ElMessage.success(`订单${row.businessId}退款成功`)
        }).catch(() => {
            // Handle cancel action
        })
    }


    const exportData = () => {
        ElMessage.success('导出操作')
    }

    const handleSizeChange = (size) => {
        pageSize.value = size
    }

    const handleCurrentChange = (page) => {
        currentPage.value = page
    }

</script>

<style scoped>
    .el-form-item {
        margin-right: 20px;
    }

    .toolbar {
        margin-bottom: 20px;
    }
</style>
